// JS 通过DOM操作 完成 元素内容填充
//      + 闭合元素 :  <标签名>内容位置</标签名>
//      + 元素内容包含 : 文本 , 其它标签
window.onload = function (){
    // let str = "测试元素内容的填充文本";
    let str = "<h3 style='color:red'>测试元素内容的填充文本</h3>"
            + "\n"
            + "<h3 style='color:red'>测试元素内容的填充文本</h3>"

    // js 中所有标签对应的DOM对象都存在内置属性  innerHTML
    //      属性 innerHTML 具有获取当前元素内容,和设置当前元素内容两个功能
    //      innerHTML会将给定的赋值内容渲染为HTML标签
    //      textContent不会将换行符(\n)和<br>标签之间进行转换
    let div1 = document.querySelector("#div1");
    // let div1 = {
    //     innerHTML:""
    // }
    console.log( div1.innerHTML )
    div1.innerHTML = str;
    console.log( div1.innerHTML )

    console.log("==================================")

    // js 中所有标签对应的DOM对象都存在内置属性  innerText
    //      innerText不会将给定的赋值内容渲染为HTML标签
    //      innerText会将换行符(\n)和<br>标签之间进行转换
    let div2 = document.querySelector("#div2");
    console.log( div2.innerText )
    div2.innerText = str;
    console.log( div2.innerText )

    console.log("==================================")

    // js 中所有标签对应的DOM对象都存在内置属性  textContent
    //      textContent不会将给定的赋值内容渲染为HTML标签
    //      textContent不会将换行符(\n)和<br>标签之间进行转换
    let div3 = document.querySelector("#div3");
    console.log( div3.textContent )
    div3.textContent = str;
    console.log( div3.textContent )
}